<template>
	<view class="">
		<view class="">
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar leftText="共享厨房" autoBack>
			</u-navbar>
		</view>


		<view class="con-body">
			<!-- 服务项目 -->
			<view>
				<u-image :src="banner" width="100%" height="300rpx"></u-image>
			</view>
			<view class="title"
				style="width: 100%; height: 90rpx; line-height: 90rpx; font-size: 40rpx;background-color: #FFFFFF; padding-left: 20rpx;">
				服务项目</view>
			<view class="user-list">
				<view class="user-list-cell" v-for="(item, index) in serviceList">
					<view class="main-service uni-cell-90" style="width: 96%; margin-left: 2%; border-radius: 20rpx;">
						<view class="user-list" @click="join(index)">
							<u-image :src="item.image" width="100%" height="280rpx"></u-image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				btnStyle: {
					width: '96%',
					borderRadius: '40rpx',
					marginTop: '40rpx',
					marginBottom: '40rpx',
					backgroundImage: "url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png')",
					backgroundSize: '100% 80rpx',
					color: '#FFFFFF'
				},
				gid: 0,
				nid:0,
				banner: 'https://s4.ax1x.com/2022/02/17/H5aAWn.png',
				serviceList: [{
						title: '共享工具',
						image: 'https://resourse.cnlhjt.com/upload/20220825/837df657d802c7da847597c0ddd0384e.png'
					},
					{
						title: '共享场地',
						image: 'https://resourse.cnlhjt.com/upload/20220825/f2164e7cd45dac271c6b4f0020b9506f.png'
					}
				]

			}
		},
		onLoad(options) {
			this.nid = options.nid;
			this.banner=options.image;
			getShareService({
				id: this.nid
			}).then(this.getShareService);
		},
		methods: {
			join(index) {
				if (index == 0) {
					this.$u.route({
						url: '/pagesShare/kitchen/tool',
						params: {

						}
					})
				} else if (index == 1) {
					this.$u.route({
						url: '/pagesShare/kitchen/field',
						params: {

						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.d_title {
		font-size: 40rpx;
		color: #111111;
		margin-top: 40rpx;
		font-weight: 400;
	}

	.d_content {
		color: #636363;
		font-size: 32rpx;
		margin-top: 25rpx;
	}

	.d_view {
		margin-top: 30rpx;
		text-align: right;
	}

	.l_title {
		font-size: 32rpx;
		color: #999999;
		float: left;
	}
</style>
